<template>
    <div id="app" class="Router">
        <!-- :name="transitionName" -->
        <transition>
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
export default {
    name: "element-vue-demo",
    data() {
        return {
            transitionName: "slide-right",
            addOrUpdateVisible: false,
            websocket: null,
        };
    },
    watch: {
        $route(to, from) {
            var toName = to.name;
            var toIndex = to.meta.index;
            var fromIndex = from.meta.index;
            this.transitionName = toIndex < fromIndex ? "slide-right" : "slide-left";
        },
    },
    created() {
        window.showLoading = this.showLoading;
        window.clearLoading = this.clearLoading;
    },
    mounted() {},
    methods: {
        showLoading() {
            this.loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
        },
        clearLoading() {
            this.loading ? this.loading.close() : "";
        },
    },
};
</script>

<style lang="scss">
@import "@/assets/styles/index.scss";
</style>
